<link rel="stylesheet" type="text/css" href="/site_media/css/addcard.css" />
<link rel="stylesheet" type="text/css" href="/site_media/css/pagination.css" />

<script language="javascript" src="/site_media/js/jquery/jquery.js"></script>
<script language="javascript" src="/site_media/js/jquery/ui/ui/ui.pagination.js"></script>
<script type="text/javascript">

$(function(){
	$("#submitButton").attr('disabled','disabled');
	$("#comments li").quickpaginate({ perpage: 5, showcounter: true, pager : $("#page_counter") });
});
$(document).ready(function(){
	$("#card_comments").keyup(function(event){
	$("#submitButton").removeAttr('disabled');
	})
});

</script>
<html>
<body>
    <form method="POST" action="/cardwall/card_comments/{{card_id}}" >
		<h1 class="comment">Add Comment</h1>  
		<p>
		  <label for="add_comment_title" class="labelLargeText " >Add Comment:</label> 
		  <textarea id="card_comments" class="cardComment" name="card_comments" ></textarea>
		</p>
		<input type="submit" id="submitButton" name="submitButton" class="submitbutton" value="Add Comment" />
		<input type="button" name="closeButton" value="Close" class="cancelbutton" onclick="window.close();" />
		{% if comments %}
			{% for each_comment in comments %}
				<ul id="comments" class="comments">
					<li class="eachComment">{{each_comment.comment}}</li>

				</ul>
				
			{% endfor %}
		{% else %}
			No comments Found
		{% endif %}
		<div id="page_counter"></div>
	</form>
</body>
</html>
	